﻿@using Microsoft.Extensions.DependencyInjection
@inject VersionService VersionManager
@inject IStringLocalizer<InstallContent> Localizer

<h3>@Title</h3>

<h4>环境准备</h4>

<p class="mt-3">确保系统安装</p>
<ul>
    <li><code>visual studio 2019</code> 或者 <code>visual studio 2022</code></li>
    <li><code>net5</code> 或者 <code>net6</code></li>
</ul>
<div><code>BootstrapBlazor</code> 目前支持 <code>net5/net6</code></div>

<h4>使用 BootstrapBlazor Project Template 扩展创建项目</h4>

<p>您可以通过 <a href="templates">[传送门]</a> 下载安装扩展后，通过扩展创建项目</p>

<h4>使用 Visual Studio 创建项目</h4>

<h5 class="mb-3">步骤一、创建项目</h5>
<div class="code-label mb-2">1. 打开 Visual Studio 2019 或者 Visual Studio 2022</div>
<div class="code-label mb-2">2. 创建一个新项目</div>
<div class="code-label mb-2">3. 选择 <b>Blazor App</b> 并单击 <b>下一步</b>, 为项目选择一个名称和位置，然后点击 <b>Create</b></div>
<img src="_content/BootstrapBlazor.Shared/images/create-new-application.png" style="border-radius: 6px;" class="d-none d-sm-block" />
@ChooseTemplate
<h5 class="mb-3">步骤二、将 BootstrapBlazor 组件添加到现有项目</h5>
<div class="code-label mb-2">1. 通过 <b>nuget.org</b> 源搜索 <code>BootstrapBlazor</code></div>
<div class="mb-2">右键点击解决方案中的项目并选择 <b>Manage Nuget Packages</b></div>
<Pre class="no-highlight">dotnet add package BootstrapBlazor --version @Version</Pre>
<img src="_content/BootstrapBlazor.Shared/images/manage-nuget-packages-for-server-app.png" style="border-radius: 6px;" class="d-none d-sm-block" />
<div class="code-label mt-3 mb-2">2. 安装 BootstrapBlazor 包</div>
<img src="_content/BootstrapBlazor.Shared/images/nuget_install.png" style="width: 1000px; border-radius: 6px;" class="d-none d-sm-block" />
<div class="code-label mt-3 mb-2">3. 添加样式表文件</div>
<div class="mb-3">在宿主文件中增加主题样式表</div>
@SheetTemplate
<Tips>
    <div>@((MarkupString)Localizer["Tips2"].Value)</div>
</Tips>
<Pre>&lt;head&gt;
    ...
    &lt;!-- 增加代码 !--&gt;
    <b>
        // 需引用 BootstrapBlazor.FontAwesome 包
        &lt;link href="_content/BootstrapBlazor.FontAwesome/css/font-awesome.min.css" rel="stylesheet"&gt;
        &lt;link href="_content/BootstrapBlazor/css/bootstrap.blazor.bundle.min.css" rel="stylesheet"&gt;
    </b>
    ...
    &lt;link href="css/site.css" rel="stylesheet"&gt;
    &lt;link href="BlazorApp1.styles.css" rel="stylesheet"&gt;
&lt;/head&gt;</Pre>
<div class="code-label mb-3">4. 添加 Javascript 文件</div>
@ScriptsTemplate
<Pre>&lt;body&gt;
    ...
    &lt;!-- 增加代码 !--&gt;
    <b>&lt;script src="_content/BootstrapBlazor/js/bootstrap.blazor.bundle.min.js"&gt;&lt;/script&gt;</b>
    ...
    &lt;script src="_framework/blazor.server.js"&gt;&lt;/script&gt;
&lt;/body&gt;</Pre>
<div class="code-label mb-2">5. 注册 BootstrapBlazor 服务</div>
@ServicesTemplate

<div class="code-label mb-2">6. 增加命名空间引用</div>
<div class="mb-1">将以下内容添加到 <code>~/_Imports.razor</code> 文件中，以便 <code>Razor</code> 文件中能识别组件</div>
<Pre><b>@@using BootstrapBlazor.Components</b></Pre>

<div class="code-label mb-2">7. 增加 <code>BootstrapBlazorRoot</code> 组件到 <code>~/App.razor</code> 文件中</div>
<Pre>&lt;BootstrapBlazorRoot&gt;
    &lt;Router AppAssembly="@@typeof(App).Assembly"&gt;
        &lt;Found Context="routeData"&gt;
            &lt;PageTitle&gt;Title&lt;/PageTitle&gt;
            &lt;RouteView RouteData="@@routeData" DefaultLayout="@@typeof(MainLayout)" /&gt;
            &lt;FocusOnNavigate RouteData="@@routeData" Selector="h1" /&gt;
        &lt;/Found&gt;
        &lt;NotFound&gt;
            &lt;PageTitle&gt;Not found&lt;/PageTitle&gt;
            &lt;LayoutView Layout="@@typeof(MainLayout)"&gt;
                &lt;p&gt;正在玩命开发中 ...&lt;/p&gt;
            &lt;/LayoutView&gt;
        &lt;/NotFound&gt;
    &lt;/Router&gt;
&lt;/BootstrapBlazorRoot&gt;</Pre>

<h5 class="mb-3">步骤三、页面中使用组件</h5>
<div class="mb-1">最后一步是在页面中使用 <code>BootstrapBlazor</code> 组件并在浏览器中运行它。例如：</div>
<div class="code-label mb-2">1. 在页面中增加一个 <code>Button</code> 按钮</div>
<Pre>&lt;Button Color="Color.Primary" Icon="fa fa-fa" Text="测试" /&gt;</Pre>
<div class="code-label mb-2">2. 在 <b>Visual studio 2022</b> 中 <kbd>F5</kbd> 运行应用程序</div>
<img src="_content/BootstrapBlazor.Shared/images/preview.png" style="border-radius: 6px;" class="d-none d-sm-block" />
